<template>
  <!-- 主容器 -->
  <div class="main">
    <!-- 导航栏 -->
    <div class="nav">
      <!-- 搜索框 -->
      <el-input v-model="searchKeyword" placeholder="搜索菜单"></el-input>
      <!-- 添加菜单按钮 -->
      <el-button @click="addMenu" class="btn1">添加菜单</el-button>
      <!-- 返回按钮 -->
      <el-button @click="goBack" class="btn1">返回</el-button>
    </div>
    <!-- 内容展示 -->
    <div class="content">
      <!-- 菜品表格 -->
      <el-table :data="filteredDishes" style="width: 100%">
        <!-- 菜名列 -->
        <el-table-column label="菜名" prop="dish_name"></el-table-column>
        <!-- 价格列 -->
        <el-table-column label="价格" prop="price"></el-table-column>
        <!-- 描述列 -->
        <el-table-column label="描述" prop="description"></el-table-column>
        <!-- 状态列 -->
        <el-table-column label="状态">
          <template v-slot="{ row }">
            <!-- 状态切换开关 -->
            <el-switch
              v-model="row.onSale"
              @change="toggleOnSale(row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <!-- 删除按钮 -->
            <el-button @click="deleteFn(row.dish_id)" type="danger"
              >删除</el-button
            >
            <!-- 查看详细信息按钮 -->
            <el-button @click="viewFn(row.dish_id)">详细信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { dishListApi, deleteDishApi, toggleOnSaleApi } from "@/utils/api";
import { useRouter } from "vue-router";
const router = useRouter();

// 状态管理
const state = ref([]);
// 搜索关键词
const searchKeyword = ref("");

// 初始化页面数据
const init = async () => {
  // 获取路由参数中的ID
  const id = router.currentRoute.value.params.id;
  // 请求菜品列表数据
  const res = await dishListApi({ id });
  // 将数据格式化为页面需要的格式
  state.value = res.data.map((item) => ({
    dish_id: item.dish_id,
    dish_name: item.dish_name,
    price: item.price,
    image_url: `http://localhost:3000/images/${item.image_url}`,
    description: item.description,
    onSale: item.on_sale === 1,
  }));
};

// 页面加载时初始化数据
init();

// 计算属性，根据搜索关键词过滤菜品数据
const filteredDishes = computed(() => {
  return state.value.filter(
    (dish) =>
      dish.dish_name
        .toLowerCase()
        .includes(searchKeyword.value.toLowerCase()) ||
      dish.price.toString().includes(searchKeyword.value.toLowerCase()) ||
      dish.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
  );
});

// 添加菜单方法
const addMenu = () => {
  // 跳转到添加菜单页面
  router.push(`/home/addDish/${router.currentRoute.value.params.id}`);
};

// 删除菜品方法
const deleteFn = async (id) => {
  // 弹出确认对话框
  const confirm = window.confirm("确定删除吗?");
  if (confirm) {
    // 调用删除菜品接口
    await deleteDishApi({ id });
    // 删除成功后重新初始化页面数据
    init();
  }
};

// 切换菜品状态方法
const toggleOnSale = async (dish) => {
  // 弹出确认对话框
  const confirm = window.confirm("确定修改状态吗?");
  if (!confirm) {
    return;
  }
  // 如果菜品状态未定义，则打印错误信息并返回
  if (typeof dish.onSale === "undefined") {
    console.error("菜品状态未定义");
    return;
  }
  // 根据菜品状态设置值
  const onSale = dish.onSale ? 1 : 0;
  // 调用切换菜品状态接口
  await toggleOnSaleApi({ id: dish.dish_id, onSale });
  // 切换成功后重新初始化页面数据
  init();
};

// 查看菜品详细信息方法
const viewFn = (id) => {
  // 跳转到菜品详细信息页面
  router.push(`/home/dishDetail/${id}`);
};

// 返回上一页方法
const goBack = () => {
  // 使用浏览器历史记录返回上一页
  window.history.back();
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  min-height: 800px;
  .nav {
    width: 100%;
    height: 80px;
    .btn1 {
      margin-top: 10px;
    }
  }
  .content {
    margin-top: 20px;
  }
}
</style>
